<template>
  <!-- 已登录 -->
  <div v-if="isLogin">
    <!-- 用户信息 -->
    <van-cell center class="member">
      <template #icon>
        <van-image :src="avatar" width="80px" round></van-image>
      </template>
      <template #title>
        <span class="title">{{ user.name }}</span>
      </template>
    </van-cell>
    <!-- 用户课操作功能列表 -->
    <van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
      :to="{name:item.name}" />
    <van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
  </div>
  <!-- 未登录 -->
  <div v-else>
    <!-- 用户信息 -->
    <van-cell center class="member" is-link to="login">
      <template #icon>
        <van-image :src="avatar_default" width="80px"></van-image>
      </template>
      <template #title>
        <span class="title">登录 / 注册</span>
      </template>
    </van-cell>
  </div>
</template>
 
<script>
  // Vue3 + vite 加载图片资源
  import avatar_default from "@/assets/images/avatar_default.png"
  import { getTokenLocal, getUserLocal,removeTokenLocal} from "@/utils/auth.js"
  import {    getDetailByIdAPI  } from "@/api/user.js";
  import { showToast } from 'vant';
  export default {
    data() {
      return {
        user:{},
        avatar_default: avatar_default ,
        avatar: "",
        isLogin:false,
        cellItems: [{
            title: "我的订单",
            name: "orderList",
            img: "orders-o",
          },
          {
            title: "收货地址",
            name: "addressList",
            img: "envelop-o",
          },
          {
            title: "我的收藏",
            name: "working",
            img: "point-gift-o",
          },
          {
            title: "个人资料",
            name: "profile",
            img: "user-o",
          },
          {
            title: "修改密码",
            name: "updatePwd",
            img: "records",
          },
        ],
      };
    },
 
    //初始页面数据
    mounted() {    
      this.user = getUserLocal();
      this.avatar = this.avatar_default;
     
      //判断是否用户登录，看Token是否为空
      let token = getTokenLocal();
      this.isLogin = token ? true : false;
     
      if (this.isLogin) {
        getDetailByIdAPI(this.user.id).then(result => {
          this.avatar = this.APIDomainName + result.data.avatar;
        }).catch(() => {});
      }
    },
 
    methods: {
      //点击用户退出事件
      onClickLogout() {
        removeTokenLocal();
        this.avatar = this.avatar_default;
        showToast("退出成功");
        this.isLogin =  false;
      },
    },
  };
</script>
 
<style lang="less" scoped>
  .member {
    margin-top: 15px;
    padding: 10px;
    background: linear-gradient(90deg, #28a2ff, #ffd787);
    box-shadow: 0 0.1rem 0.25rem #f8e3c6;
  }
 
  .title {
    padding-left: 20px;
    font-size: 24px;
    color: rgb(65, 16, 241);
  }
</style>